<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
.redBorder{border: 1px solid red;}
    #wp_app_edit_list{background-color: #36B36A; color:#FFFFFF;} 
    #wp_app_edit_list .app_edit_data_item{margin-right: 15px; margin-top: 10px; width: 233px; height: 50px; float: left;}
    #wp_app_edit_list .app_edit_data_item img{width: 40px; height: 40px; float: left;}
    #wp_app_edit_list li{list-style-type: none; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-left: 50px;}
    #wp_app_edit_list .divWordWrap{word-break:break-all; width: 183px; font-size: 12px; height: 30px; margin-left: 50px;}
    #wp_app_edit_list .clickClass{cursor: pointer;}
    #app_edit_list_zero_result{display: none;font-size: 12px;position: absolute;top:20px;left:30px;}
    .wp_app_edit_list{position:relative;width: 512px;}
</style>

<div id="wp_app_edit_list" class="wp_app_edit_list">
    <span id="app_edit_list_zero_result" class="">There are no apps available for Editing.</span>
    <div id="wp_app_edit_list_body" class="wp_h_390 wp_ml_15">
    </div>
</div>
<script id="wp_app_edit_list_tmpl" type="text/x-kendo-template">
    <div class="app_edit_data_item">
        <img id="appIcon_edit_list" class="clickClass" src="#: data.AppIcon #" onerror="this.src='imgs/40.png'" onclick="wp_app_edit_list.wp_appedit_reverseApp(#: data.AppId #)" />
        <li id="appTitle_edit_list" class="clickClass" title="#: data.AppTitle #" onclick="wp_app_edit_list.wp_appedit_reverseApp(#: data.AppId #)">#: data.AppTitle #</li>
        <div id="appDescAbb_edit_list" class="divWordWrap clickClass" title="#: data.AppDescription #" onclick="wp_app_edit_list.wp_appedit_reverseApp(#: data.AppId #)">#: data.descAbb #</div>
    </div>
</script>
<script type="text/javascript">
    var wp_app_edit_list = (function() {
        var loader = new Workport.Loader($('#wp_app_edit_list'),{textCSS:{'color':'white'}});
        var offset=0;
        var el = $('#wp_app_edit_list'), appEditTmpl = $("#wp_app_edit_list_tmpl"), appEditList = $("#wp_app_edit_list_body"), 
            lastFlag, iPage, getDataFlag;
        var useragent = Workport.getBrowser();
        el.kendoWindow({width: 512, height: 400, modal: true, title: "Edit", draggable: false, resizable: false, visible: false, actions: ["Close"], close: function() {
            appEditList.slimScroll({scrollTo: '0px',disableFadeOut:true});
            offset=0;
            $('#app_edit_list_zero_result').hide();
            if(useragent == 'ipad'){
                $('body').unbind('touchmove')
            }
        },open:function(){if(useragent == 'ipad'){
                    $('body').bind('touchmove',function(event){event.preventDefault()});
                    $('#wp_app_edit_list_body').bind('touchmove',function(event){event.stopPropagation()});
                }} }).data('kendoWindow').center(); 

        el.data('kendoWindow').wrapper.find('.k-i-close').prop("id","close_btn_span");
        $('#wp_app_edit_list').parents('.k-window').addClass('greenWindow');

        function getData () {
            loader.show();
            Workport.AppAPI.getEditApp(function(_data){
                loader.hide();
                var len, desc, tmplData = [], charLen = 50;
                if(_data.ResponseCode == 'WP2021'){
                    $('#global_wait').hide();
                    $('#app_edit_list_zero_result').show();
                }else{
                    $('#app_edit_list_zero_result').hide();
                    lastFlag = _data.IsEnd;
                    tmplData = _data.EditApps;
                    len = tmplData.length;
                    offset=offset+len;
                    for (var i = 0; i < len; i++) {
                        desc = tmplData[i].AppDescription;
                        if (desc.length > charLen) {
                            desc = desc.substr(0, charLen) + "...";
                        }
                        tmplData[i].descAbb = desc;
                    }
                    render(tmplData);
                }
                getDataFlag = false;
            }, {offset: offset, count: 15, sort: 'ASC'});
        }

        function render (_data) {
            var tmpl = kendo.template($.trim(appEditTmpl.html()));
            var arr = new Array();
            $.map(_data, function(_elem) {
                arr.push(tmpl(_elem));
            });
            $(arr.join('')).appendTo(appEditList);
        }

        $(".clickClass").click(function () {
            appsToolsCreateWin.apps_tools_win_create(appId);
        });

        return {
            reset : function(){
                iPage = 1;
                lastFlag = false;
                getDataFlag = false;
                appEditList.off("*");
                appEditList.empty();
                getData();
                el.data('kendoWindow').open();

                appEditList.slimScroll({height: 390, width: '512px', wheelStep : 20, scrollTo: '0px',disableFadeOut:true}).bind('slimscroll', function(e, pos) {
                    if('bottom' == pos && !lastFlag && !getDataFlag){
                        getDataFlag = true;
                        getData();
                    }
                });
            },
            wp_appedit_reverseApp : function (appId){
                el.data('kendoWindow').close();
                appsToolsCreateWin.apps_tools_win_create(appId);
            }
        };
    })();
</script>
